<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="/wk1un2/Backstage/lib/layui/css/layui.css" />
</head>
<body>
<div class="layui-form-item" style="margin-top:20px ;">
				<!--不提交-->
				<div class="layui-form-item">
					<label class="layui-form-label">状态</label>
					<div class="layui-input-inline" style="width: 120px;">
						<input type="text" name="zhangTai" id="txtname" class="layui-input">
					</div>
					<button class="layui-btn" id="search" data-type="reload">查询</button>
				</div>

		</div>
		<!--lay-filter="test"，给表格加的一个过滤器，当我有一个点击的操作-->
		<table class="layui-hide" id="test" lay-filter="test"></table><!--数据表格-->
		<script type="text/html" id="barDemo"><!--在表格的行内加的工具-->
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		</script>
		<script type="text/javascript" src="/wk1un2/Backstage/lib/layui/layui.js"></script>
		<script>
			layui.use('table', function() {//加载表格模块
				var table = layui.table;
                var $=layui.jquery;
				table.render({//初始化数据表格，专业的叫法渲染表格
					elem: '#test',//table的id
					toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
					//请求的地址
					url:"/wk1un2/MessagehtServlet",//请求服务器连接的地址
					where:{
						method:"selectAlljson"
					},
					method:'post',//请求的方式
					cols: [//数据表格中的列
						[{
							field: 'id',
							width: 80,
							title: '留言的id',
						},{
							field: 'sname',
							width: 100,
							title: '姓名',
						},{
							field: 'phone',
							width: 150,
							title: '电话',
						},{
							field: 'email',
							width: 150,
							title: '邮箱',
						},{
							field: 'matter',
							width: 150,
							title: '内容',
						},{
							field: 'zhuangTai',
							width: 150,
							title: '状态',
						},{
							field: 'reply',
							width: 150,
							title: '回复内容',
						},{fixed: 'right', title:'操作', toolbar: '#barDemo', width:180}]
					],
					id:"testreload",
					page: true//是否开启分页
				});
					
				table.on('tool(test)', function(obj) {//tool监听的是行内的工具栏
					
					if(obj.event === 'edit') { 
						console.log(obj.data);
						layer.open({ //打开一个页面
							type: 2, //在当前的页面之上，弹框形式，展示出添加用户的界面
							area: ['500px', '400px'], //页面的宽高
							content: './message_update.jsp', //页面所在的位置
							title: '编辑用户',
							success:function(layero,index){
								var body=layer.getChildFrame('body',index);
								body.contents().find("#id").val(obj.data.id);
								body.contents().find("#sname").val(obj.data.sname);
								body.contents().find("#phone").val(obj.data.phone);
								body.contents().find("#email").val(obj.data.email);
								body.contents().find("#matter").val(obj.data.matter);
								body.contents().find("#zhuangTai").val(obj.data.zhuangTai);
								body.contents().find("#reply").val(obj.data.reply);
							},
							end:function(){
								window.location.reload();//当窗口关闭之后刷新页面
							}
						});
					}
				});
				//给search一个点击事件
				//当我执行的时候，这个方法search是button的id
				$("#search").on("click",function(){
					var name=$("#txtname").val();//上面搜索框的id
					table.reload("testreload",{//testreload是上面渲染表格的id
						where:{//接口需要的两个请求参数
							 
							"zhuangTai":name
						}
					});
				});
			});
		</script>
</body>
</html>